<template>
  <BaseMainSlot :show-btn-box="true">
    <!-- 入库 -->
    <template v-slot:btn-box>
      <ActionBar
        :page-no="24"
        :add-active="true"
        :del-active="delActive"
        :has-cancel="false"
        @add="add"
        @del="del"
      />
    </template>
    <template v-slot:search-box>
      <SearchBox @search="search">
        <div class="seach-box">
          <div class="select-box-content">
            <div class="select-box-content-name">入库单号：</div>
            <el-input
              v-model="querylist.inputStorageNo"
              placeholder="请输入入库单号"
              clearable
            />
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">入库仓库：</div>
            <el-select
              v-model="querylist.stordocNo"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in warehouseOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">接收人：</div>
            <el-select v-model="querylist.personNo" placeholder="请选择" clearable>
              <el-option
                v-for="item in personOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">入库货：</div>
            <el-select
              v-model="querylist.materialNo"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in enterMaterialList.others"
                :key="item.materialNo"
                :label="item.materialName"
                :value="item.materialNo"
              />
            </el-select>
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">入库日期：</div>
            <el-date-picker
              v-model="querylist.date"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            />
          </div>
        </div>
      </SearchBox>
    </template>
    <template v-slot:table-box>
      <tdtable
        v-loading="loading"
        :page="page"
        :show-select-column="showSelectColumn"
        :title="title"
        :prop-list="propList"
        :table-data="tableData"
        :show-index-column="showIndexColumn"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        @handleSelectionChange="handleSelectionChange"
      >
        <template v-slot:showImg="{row}">
          <div
            v-if="row.inputStorageNo"
            class="pointer"
            @click="showImgDialog(row.pictureNo)"
          >
            <i class="el-icon-view"></i>查看图片
          </div>
        </template>
        <template v-slot:edit="{row}">
          <div v-if="row.inputStorageNo" class="operate">
            <div class="pointer" @click="edit(row)">
              <i class="el-icon-edit"></i>修改
            </div>
            <div class="pointer del" @click="alonedDel(row)">
              <i class="el-icon-delete"></i>删除
            </div>
          </div>
        </template>
      </tdtable>
    </template>
    <template v-slot:dialog>
      <AddEditDialog
        :show="show"
        :input-storage-no="inputStorageNo"
        :source-options="sourceOptions"
        :enter-ware-type-options="enterWareTypeOptions"
        :batch-options="batchOptions"
        :person-options="personOptions"
        :entrusted-options="entrustedOptions"
        :warehouse-options="warehouseOptions"
        :production-options="enterMaterialList"
        :edit-data="editData"
        :unit-options="unitOptions"
        :type="materialtype"
        @closeDialog="closeDialog"
        @addEvent="addEvent"
      />
      <ImgDialog
        :picture-url="pictureUrl"
        :show="isShowImgDialog"
        @closeDialog="closeImgDialog"
      />
    </template>
  </BaseMainSlot>
</template>

<script>
import ActionBar from "@/components/ActionBar/index1.vue";
import BaseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot.vue";
import AddEditDialog from "./components/add-edit-dialog.vue";
import ImgDialog from "./components/img-dialog.vue";
import tdtable from "@/components/table/index.vue";
import SearchBox from "@/components/SearchBox/index.vue";
import processingAccessoryApi from "@/api/processing-management/basic-info-manage/processing-accessory-manage/index";
import EnterWarehouseApi from "@/api/processing-management/stock-manage/enter-warehouse-manage/index";
// 获取委托加工单位
import entrustedApi from "@/api/processing-management/basic-info-manage/entrusted-processing-unit-manage/index";
// 获取仓库地址
import stordocApi from "@/api/processing-management/stock-manage/warehouse-manage/index";
// 获取产品
import productionApi from "@/api/processing-management/basic-info-manage/processing-product-manage/index";
// 获取物料
import materialApi from "@/api/processing-management/basic-info-manage/material-manage/index";
import QualityManage from "@/api/processing-management/quarity-manage";
import UnitApi from "@/api/processing-management/basic-info-manage/data-item-manage/index";
import processingPrtApi from "@/api/processing-management/basic-info-manage/processing-material-manage/index";
// import { mymixin } from "@/utils/mixin";
export default {
  name: "ProcessBatchQuery",
  components: {
    BaseMainSlot,
    // SelectButton,
    tdtable,
    AddEditDialog,
    ImgDialog,
    SearchBox,
    ActionBar
  },
  // mixins: [mymixin],
  data() {
    return {
      materialtype: "",
      enterMaterialList: {
        rawMaterial: [],
        product: [],
        accessories: [],
        others: []
      },
      pictureUrl: "",
      delActive: false,
      querylist: {
        inputStorageNo: "",
        batchNo: "",
        stordocNo: "",
        personNo: "",
        materialNo: "",
        date: ""
      },
      unitOptions: [],
      loading: false,
      inputStorageNo: "",
      sourceOptions: [
        { name: "生产管理系统", value: "生产管理系统" },
        { name: "自行入库", value: "自行入库" },
        { name: "委托加工入库", value: "委托加工入库" }
      ],
      enterWareTypeOptions: [
        { name: "产品入库", value: "产品入库" },
        { name: "原料入库", value: "原料入库" },
        { name: "附属品入库", value: "附属品入库" },
        { name: "其他", value: "其他" }
      ],
      batchOptions: [],
      personOptions: [],
      entrustedOptions: [],
      warehouseOptions: [],
      editData: {},
      show: false,
      isShowImgDialog: false,
      // 显示序号
      showIndexColumn: true,
      showSelectColumn: true,
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      title: "加工批次列表",
      propList: [
        { prop: "inputStorageNo", label: "入库单号", minWidth: "100" },
        { prop: "rawMaterialBatchNo", label: "入库批次", minWidth: "220" },
        { prop: "stordocName", label: "入库仓库", minWidth: "100" },
        { prop: "personName", label: "接收人", minWidth: "100" },
        { prop: "type", label: "入库类型", minWidth: "100" },
        { prop: "materialName", label: "入库产品", minWidth: "100" },
        {
          prop: "prop6",
          label: "入库图片",
          minWidth: "100",
          slotName: "showImg"
        },
        { prop: "date", label: "入库日期", minWidth: "120" },
        { label: "操作", minWidth: "120", slotName: "edit" }
      ],
      tableData: [],
      handle: "add",
      handleSelectList: ""
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.initOptions();
    this.queryPageList();
    this.getUnitOptions();
  },
  methods: {
    // 获取单位选择项
    getUnitOptions() {
      UnitApi.queryUnit().then(res => {
        if (res.code === 1) {
          this.unitOptions = res.data;
        }
      });
    },
    // 从接口获取选择项
    initOptions() {
      this.getBatchOptions();
      this.getPersonOptions();
      this.getEntrustedOptions();
      this.getWarehouseOptions();
      this.getProductionOptions();
      this.getRawMaterialOptions();
      this.getOthersOptions();
      this.getAccessorys();
    },
    // 原料
    getRawMaterialOptions() {
      processingPrtApi.queryList().then(res => {
        if (res.code === 1) {
          this.enterMaterialList.rawMaterial = res.data;
        }
      });
    },
    // 附属品
    getAccessorys() {
      processingAccessoryApi.queryList().then(res => {
        if (res.code === 1) {
          this.enterMaterialList.accessories = res.data;
        }
      });
    },
    // 产品
    getProductionOptions() {
      productionApi.queryByConditionList().then(res => {
        if (res.code === 1) {
          this.enterMaterialList.product = res.data;
        }
      });
    },
    // 获取物料（others）
    getOthersOptions() {
      materialApi.queryByConditionList().then(res => {
        if (res.code === 1) {
          this.enterMaterialList.others = res.data;
        }
      });
    },
    // 获取入库单号
    getInputStorageNo() {
      EnterWarehouseApi.generateNo().then(res => {
        console.log(res);
        if (res.code === 1) {
          this.inputStorageNo = res.data;
        }
      });
    },
    // 获取生产批次选择项
    getBatchOptions() {
      EnterWarehouseApi.getbatchlist().then(res => {
        if (res.code === 1) {
          let list = [];
          // 提供表头搜索数据
          res.data.forEach(item => {
            list.push({
              name: item.batchName,
              value: item.batchNo
            });
          });
          this.batchOptions = list;
        }
      });
    },
    // 获取作业人数组
    getPersonOptions() {
      EnterWarehouseApi.queryPersonByCondition().then(res => {
        if (res.code === 1) {
          let list = [];
          res.data.forEach(item => {
            list.push({
              name: item.person.name,
              value: item.person.personNo
            });
          });
          this.personOptions = list;
        }
      });
    },
    // 获取委托加工单位选项
    getEntrustedOptions() {
      entrustedApi.queryByConditionList().then(res => {
        if (res.code === 1) {
          let list = [];
          res.data.forEach(item => {
            list.push({
              name: item.manufacturingName,
              value: item.manufacturingNo
            });
          });
          this.entrustedOptions = list;
        }
      });
    },
    // 获取仓库选项
    getWarehouseOptions() {
      stordocApi.queryByConditionList().then(res => {
        if (res.code === 1) {
          let list = [];
          res.data.forEach(item => {
            list.push({
              name: item.stordocName,
              value: item.stordocNo
            });
          });
          this.warehouseOptions = list;
        }
      });
    },
    search() {
      this.queryPageList();
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.queryPageList();
    },

    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.queryPageList();
    },
    // 选中table行点击事件
    handleSelectionChange(val) {
      this.handleSelectList = [];
      val.forEach(e => {
        this.handleSelectList.push(e.inputStorageNo);
      });
      if (this.handleSelectList.length > 0) {
        this.delActive = true;
      } else {
        this.delActive = false;
      }
    },
    queryPageList() {
      // 获取数据
      let param = {
        page: this.page.currentPage,
        size: this.page.pageSize,
        entity: this.querylist
      };
      EnterWarehouseApi.queryPageList(param).then(res => {
        if (res.code === 1) {
          let data = res.data;
          this.page.total = data.totalElements;
          this.tableData = data.content;
        }
      });
    },
    // 添加物料
    addEvent(formData) {
      let params = formData;
      if (this.handle === "add") {
        EnterWarehouseApi.add(params).then(res => {
          console.log(res);
          if (res.code === 1) {
            this.$message.success(res.msg);
            this.queryPageList();
          }
        });
      }
      if (this.handle === "edit") {
        EnterWarehouseApi.edit(params).then(res => {
          console.log(res);
          if (res.code === 1) {
            this.$message.success(res.msg);
            this.queryPageList();
          }
        });
      }
    },
    // 单个删除
    alonedDel(e) {
      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "myClass"
      })
        .then(() => {
          EnterWarehouseApi.aloneDel(e.inputStorageNo).then(res => {
            if (res.code === 1) {
              this.$message.success(res.msg);
              this.queryPageList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 删除供应商
    del() {
      if (this.handleSelectList.length < 1) {
        this.$message.error("请选择要删除的数据");
        return;
      }
      let params = {
        noList: this.handleSelectList
      };
      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "myClass"
      })
        .then(() => {
          EnterWarehouseApi.del(params).then(res => {
            if (res.code === 1) {
              this.$message.success(res.msg);
              this.queryPageList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    edit(row) {
      this.materialtype = "others";
      this.show = true;
      this.handle = "edit";
      this.editData = { ...row };
    },
    // 显示添加弹出框
    add() {
      this.materialtype = "";
      this.getInputStorageNo();
      this.handle = "add";
      this.show = true;
    },
    showImgDialog(pictureNo) {
      this.isShowImgDialog = true;
      if (pictureNo) {
        QualityManage.getPictureUrl(pictureNo).then(res => {
          this.pictureUrl = "data:image/png;base64," + res.data.data;
        });
      } else {
        this.pictureUrl = "";
      }
    },
    closeDialog() {
      this.show = false;
      this.editData = {
        inputStorageNo: "",
        source: "",
        type: "",
        stordocNo: "",
        materialNo: "",
        quantity: "",
        batchNo: "",
        personNo: "",
        date: "",
        manufacturingNo: ""
      };
      this.inputStorageNo = "";
    },
    closeImgDialog() {
      this.isShowImgDialog = false;
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";

::v-deep .el-collapse-item__header {
  height: 0px;
}
::v-deep .el-collapse-item__content {
  padding-bottom: 10px;
}
::v-deep .el-pagination {
  position: absolute;
  right: 0px;
  bottom: -18px;
}

::v-deep .el-form-item__label {
  min-width: 120px !important;
  text-align: end;
}
::v-deep .common-layout {
  height: 644px !important;
}
.total {
  position: absolute;
  top: 25px;
  left: 300px;
}

::v-deep .el-form-item.is-error {
  .el-input__inner {
    border-color: #f56c6c !important;
  }
}
.botton {
  background-color: #0091b7;
}
.pointer {
  cursor: pointer;
  text-decoration: underline;
}
</style>
